new Vue({
    el: '#app',
    data: {
        selectedYear: new Date().getFullYear(),
        selectedMonth: new Date().getMonth() + 1,
        years: [],
        months: [],
        weatherData: [],
        statistics: null,
        loading: false,
        error: null,
        lineChartHtml: '',
        pieChartHtml: '',
        roseChartHtml: ''
    },
    mounted() {
        this.initData();
    },
    methods: {
        async initData() {
            try {
                // 获取年份列表
                const yearsResponse = await fetch('http://localhost:5000/api/years');
                this.years = await yearsResponse.json();
                
                // 获取月份列表
                const monthsResponse = await fetch('http://localhost:5000/api/months');
                this.months = await monthsResponse.json();
                
                // 加载初始数据
                await this.searchWeather();
            } catch (error) {
                this.error = '数据加载失败：' + error.message;
            }
        },
        async searchWeather() {
            this.loading = true;
            this.error = null;
            
            try {
                // 获取天气数据
                const weatherResponse = await fetch(`http://localhost:5000/api/weather?year=${this.selectedYear}&month=${this.selectedMonth}`);
                this.weatherData = await weatherResponse.json();
                
                // 获取统计数据
                const statsResponse = await fetch(`http://localhost:5000/api/statistics?year=${this.selectedYear}&month=${this.selectedMonth}`);
                this.statistics = await statsResponse.json();
                
                // 获取Plotly图表数据
                const t = Date.now();
                const [line, pie, rose] = await Promise.all([
                  fetch(`http://localhost:5000/api/line-chart?year=${this.selectedYear}&month=${this.selectedMonth}&_t=${t}`).then(r => r.json()),
                  fetch(`http://localhost:5000/api/pie-chart?year=${this.selectedYear}&month=${this.selectedMonth}&_t=${t}`).then(r => r.json()),
                  fetch(`http://localhost:5000/api/rose-chart?year=${this.selectedYear}&month=${this.selectedMonth}&_t=${t}`).then(r => r.json())
                ]);
                Plotly.newPlot('lineChart', line.data, line.layout, {responsive: true});
                Plotly.newPlot('pieChart', pie.data, pie.layout, {responsive: true});
                Plotly.newPlot('roseChart', rose.data, rose.layout, {responsive: true});
            } catch (error) {
                this.error = '数据查询失败：' + error.message;
            } finally {
                this.loading = false;
            }
        }
    }
}); 